<template>

  <div class="detail-group"
       id="pdfDom">
    <div style="float:right">
      <el-button type="info"
                 size="mini"
                 @click="getPdf()"
                 style="display: none">导出PDF</el-button>
    </div>

    <div>
      <div class="detail-data-line"
           :class="{'detail-data-inline':item.newline}"
           v-for="(item, index) in detailData"
           :key="index">
        <label class="detail-data-label"
               :class="{'detail-data-value-related':item.type=='related'}">{{item.label}}:</label>
        <p class="detail-data-value"
           :class="{'detail-data-value-big':!item.newline}"
           v-if="item.value"><span :class="{'detail-data-color-warning':item.colorType=='warning'}">{{item.value}}</span></p>
        <p class="detail-data-value"
           v-if="!item.value && item.type && item.type!='related' ">&nbsp;</p>

        <el-tooltip style="margin-left: 10rem;"
                    class="item"
                    effect="dark"
                    content="下载资料"
                    placement="top-start"
                    v-if="item.type=='basis'">
          <el-button class="downbtn"
                     @click="downloadfile(item.fileName,item.type)"
                     v-if="item.fileName">
            <img src="img/download-blue.png"
                 class="detail-data-img"
                 v-if="item.fileName" /><span v-if="item.fileName">下载</span>
          </el-button>
        </el-tooltip>
        <p id="pfilename"
           class="detail-data-file"
           v-if="item.type=='basis'"></p>

        <el-tooltip style="margin-left: -14rem;"
                    class="item"
                    effect="dark"
                    content="下载资料"
                    placement="top-start"
                    v-if="item.type=='text'">
          <el-button class="downbtn"
                     @click="downloadfile(item.fileName,item.type)"
                     v-if="item.fileName">
            <img src="img/download-blue.png"
                 class="detail-data-img"
                 v-if="item.fileName" /><span v-if="item.fileName">下载</span>
          </el-button>
        </el-tooltip>
        <p id="pfilename2"
           class="detail-data-file"
           v-if="item.type=='text'"></p>

        <div v-if="item.type=='related'"
             v-for="(i, index) in item.fileName"
             :key="index"
             class="relateddiv">
          <el-tooltip class="item"
                      effect="dark"
                      content="下载资料"
                      placement="left-end"
                      v-if="i.fileId">
            <el-button class="downbtn"
                       @click="downloadfilerelated(i.fileId,i.fileName+i.extend)"
                       v-if="i.fileId">
              <img src="img/download-blue.png"
                   class="detail-data-img"
                   v-if="i.fileId" /><span v-if="i.fileId">下载</span>
            </el-button>
          </el-tooltip>
          <p id="pfilename1"
             class="detail-data-file"
             v-if="i.fileId">{{i.fileName+i.extend}}</p>
        </div>

        <div v-for="(file,index) in item.files"
             :key="index"
             :class="index==0?'inline-group':'left-group'">
          <el-tooltip class="item"
                      effect="dark"
                      content="下载资料"
                      placement="top-start">
            <el-button class="downbtn"
                       @click="downloadFile(file.fileId,file.fileName)">
              <img src="img/download-blue.png"
                   class="detail-data-img" /><span>下载</span>
            </el-button>
          </el-tooltip>
          <p class="detail-data-file"
             v-if="file.fileName">{{file.fileName}}</p>
        </div>
        <div v-for="(img,index) in item.imgfiles"
             :key="index"
             style="display: inline-block;cursor: pointer;"
             @click.stop="previewFileImg(img.url)">
          <img style="width:100px;height:100px;"
               :src="img.url"
               alt="">
        </div>
      </div>
    </div>
    <!--图片预览弹框-->
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%"
           :src="dialogImageUrl"
           alt="">
    </el-dialog>
  </div>
</template>

<script>
import { getfileinfo, filedownload } from "@/api/system";
import { handleFile } from '@/util/util'
// import {validatenull} from '@/util/validate'
export default {
  name: "detailGroup",
  data () {
    return {
      htmlTitle: '规划详情',
      data: [],
      filenametemprelated: '',
      filenametempbasis: '',
      filenametemptext: '',
      // 图件预览弹框imgUrl
      dialogImageUrl: '',
      // 图件预览弹框是否显示
      dialogVisible: false,
    }
  },
  created () {
    this.init()
  },
  props: {
    detailData: {
      type: Array,
      default: () => []
    }
  },
  watch: {
    detailData () {
      this.init()
    }
  },
  methods: {
    async init () {
      if (this.detailData) {
        var basisList = this.detailData.filter(item => item.type && item.type == 'basis' && item.fileName);
        if (basisList && basisList.length > 0) {
          this.filenametempbasis = await handleFile(basisList[0].fileName, 'pfilename');
        }

        var textList = this.detailData.filter(item => item.type && item.type == 'text' && item.fileName);
        if (textList && textList.length > 0) {
          this.filenametemptext = await handleFile(textList[0].fileName, 'pfilename2')
        }
        var relatedList = this.detailData.filter(item => item.type && item.type == 'related' && item.fileName);
        if (relatedList && relatedList.length > 0) {
          //无用代码 this.filenametemprelated= await handleFile(relatedList[0].fileName,'pfilename1')
        }

        var nametemp = this.detailData.filter(item => item.label == '规划名称');
        if (nametemp && nametemp.length > 0) {
          this.htmlTitle = nametemp[0].value;
        }

      }
    },

    downloadfilerelated (fileId, filename) {
      filedownload(fileId).then(response => {
        if (response.status == 200) {
          this.download(response.data, filename)
        }
      }).catch((error) => {

      })
    },


    downloadfile (fileId, type) {
      filedownload(fileId).then(response => {
        if (response.status == 200) {
          if (type == 'basis') {
            this.download(response.data, this.filenametempbasis)
          } else if (type == 'related') {
            this.download(response.data, this.filenametemprelated)
          } else if (type == 'text') {
            this.download(response.data, this.filenametemptext)
          }

        }
      }).catch((error) => {

      })
    },
    // 附件下载
    downloadFile (fileId, fileName) {
      filedownload(fileId).then(response => {
        if (response.status == 200) {
          this.download(response.data, fileName)
        }
      }).catch((error) => {
        this.$notify({
          title: "失败",
          message: "上传失败[" + error + "]",
          type: "error",
          duration: 2000
        });
      })
    },
    // 下载文件
    download (data, filename) {
      if (data == null) {

      } else {
        let url = window.URL.createObjectURL(new Blob([data]));
        let link = document.createElement('a');
        link.style.display = 'none';
        link.href = url;
        link.setAttribute('download', filename);
        document.body.appendChild(link);
        link.click()
      }
    },
    // 图片预览
    previewFileImg (url) {
      this.dialogImageUrl = url;
      this.dialogVisible = true;
    }
  }
};
</script>

<style lang="scss">
.detail-group {
  padding: 0 31px;
  margin-top: 0px;
}
.detail-data-inline {
  display: inline-block;
  width: 50%;
}
.detail-data-line {
  font-size: 1rem;
  border-bottom: 1px solid #dbdbdb;
}
.detail-data-label {
  display: inline-block;
  width: 150px;
  font-weight: 600;
  margin: 16px 0;
}
.detail-data-value {
  display: inline-block;
  margin-right: 12px;
  width: 200px;
  /*font-weight: 500;*/
}
.detail-data-value-big {
  width: 80%;
}
.detail-data-value-related {
  float: left;
  margin-top: 10px;
}
.detail-data-file {
  display: inline-block;
  margin-left: 12px;
}
.detail-data-img {
  width: 23px;
  height: 23px;
  position: relative;
  top: 6px;
}
.detail-data-color-warning {
  background-color: #e6a23c;
  color: #fff;
  padding: 2px;
}
.downbtn {
  padding: 0 0 6px 0px;
  border: 0px solid #dcdfe6;
}
.relateddiv {
  margin-top: 0px;
  margin-left: 150px;
  margin-bottom: 0px;
}
.inline-group {
  display: inline-block;
}
.left-group {
  margin-left: 150px;
}
</style>
